<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>权限规则管理</title>
  <link href="../static/vendor/element-ui@2.15.9/lib/theme-chalk/index.css" rel="stylesheet" />
  
  <link href="../static/eladmin/css/eladmin.min.css" rel="stylesheet" />
</head>

<body>
  <div id="app" class="list-page dark-theme" v-cloak>
    <div class="d-flex flex-column px-3" style="height:100%">
      <!-- 搜索面板 -->
      <div class="card-sm card-search mt-3 mb-1">
        <el-form :inline="true" :model="dataOfSearch.data" size="mini" label-width="77px">
          <div class="d-flex flex-wrap">
            <el-form-item label="主键ID">
              <el-input v-model="dataOfSearch.data.id" placeholder="请输入主键ID" clearable></el-input>
            </el-form-item>
            <el-form-item label="规则标题">
              <el-input v-model="dataOfSearch.data.title" placeholder="请输入规则标题" clearable></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" :loading="loadingState.search" @click="onSearch()">查询</el-button>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <div class="card-sm card-table flex-grow-1 d-flex flex-column">
        <div slot="header">
          <!-- 工具栏 -->
          <table-toolbar :loading-of-refresh.sync="loadingState.refresh" :title-of-print="title"
            @click="onClickToolbar">
          </table-toolbar>
        </div>
        <el-table :data="dataOfMain" row-key="id" :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
          style="width: 100%" height="100%" fixed :loading="loadingState.list"
          @selection-change="onCheckTableRows">
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column prop="id" label="主键ID"></el-table-column>
          <el-table-column prop="pid" label="父级ID"></el-table-column>
          <el-table-column prop="title" label="规则标题"></el-table-column>
          <el-table-column prop="link" label="规则路径"></el-table-column>
          <el-table-column prop="icon" label="图标">
            <template slot-scope="scope">
              <el-image style="width: 100px; height: 100px" :src="scope.row.icon" :preview-src-list="[scope.row.icon]">
              </el-image>
            </template>
          </el-table-column>
          <el-table-column prop="code" label="权限代码"></el-table-column>
          <el-table-column prop="extra" label="扩展数据"></el-table-column>
          <el-table-column prop="sort" label="排序权重"></el-table-column>
          <el-table-column prop="status" label="状态"></el-table-column>
          <el-table-column prop="created_at" label="创建时间"></el-table-column>
          <el-table-column prop="updated_at" label="更新时间"></el-table-column>
          <el-table-column fixed="right" label="操作" width="90">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="onClickToolbar('edit', scope.row)">编辑</el-button>
              <el-button type="text" size="small" @click="onClickToolbar('delete', scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagnation-bar d-flex justify-content-end">
        <el-pagination @size-change="onPaging('size', $event)" @current-change="onPaging('page', $event)"
          :current-page="dataOfQuery.page" :page-sizes="dataOfQuery.pageSizeList" :page-size="dataOfQuery.pageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="dataOfQuery.total">
        </el-pagination>
      </div>
    </div>
  </div>
  <script src="../static/vendor/vue@2.6.14/dist/vue.min.js"></script>
  <script src="../static/vendor/element-ui@2.15.9/lib/index.js"></script>
  <script src="../static/vendor/axios@0.27.2/dist/axios.min.js"></script>
  <script src="../static/vendor/mockjs@1.1.0/dist/mock.js?v=1.0.0"></script>
  <script src="../static/js/utils.min.js"></script>
  <script src="../static/mock/admin/api-route.js?v=1.0.0"></script>
  <script src="../static/mock/admin/auth-rules.js?v=1.0.0"></script>
  <script src="../static/eladmin/js/elcomponents.min.js"></script>
  <script>
    // 使用模拟数据
    useMockData();
    /**
     * 权限规则管理页面
     */
    const App = {
      el: '#app',
      name: "AuthRulesIndex",
      data() {
        return {
          // 页面标题
          title: "权限规则管理",
          // 浏览器请求参数
          dataOfQuery: {
            total: 0,
            page: 1,
            pageSize: 10,
            pageSizeList: [10, 20, 50, 100, 1000],
            keyword: '',
          },
          // 数据加载状态
          loadingState: {
            refresh: false,
            search: false,
            paging: false,
            list: false,
          },
          // 可视状态
          visibleState: {
            search: true,
          },
          // 查询数据
          dataOfSearch: {
            data: {},
          },
          // 表格数据
          dataOfMain: [],
          // 已勾选的表格行
          dataOfCheckedRows: [],
          dataOfCheckedKeys: [],
        };
      },
      methods: {
        // 加载列表数据
        loadData() {
          this.loadingState.list = true;
          // 查询参数
          let queryParams = {
            page: this.dataOfQuery.page,
            page_size: this.dataOfQuery.pageSize,
            search_text: this.dataOfQuery.keyword,
            _success: true, // 通过传参 _success 来控制返回消息的成功状态。
          };
          queryParams = Object.assign(queryParams, this.dataOfSearch.data);
          console.log('[加载数据列表] 查询参数= ', queryParams);
          this.vuiAjax
            .get(this.apiRoute.authRulesIndex, { params: queryParams })
            .then(msgInfo => {
              this.loadingState.refresh = this.loadingState.list = this.loadingState.search = this.loadingState.paging = false;
              console.log("[加载数据列表] 返回结果= ", msgInfo);
              if (!msgInfo.success) {
                this.$message.error(msgInfo.message);
                return;
              }
              this.dataOfMain = msgInfo.data.data;
              this.dataOfQuery.total = msgInfo.data.total;
            })
            .catch(msgInfo => {
              this.loadingState.refresh = this.loadingState.list = this.loadingState.search = this.loadingState.paging = false;
              this.$message.error(msgInfo.msg);
            });
        },
        // 表格行勾选事件
        onCheckTableRows(checkedRows) {
          console.log("[表格行勾选事件] ", checkedRows);
          this.dataOfCheckedRows = checkedRows;
          this.dataOfCheckedKeys = checkedRows.map(item => item.id)
        },
        // 点击工具栏（表头工具栏和单元格工具栏）
        onClickToolbar(name, item) {
          console.log("[点击工具栏] ", name, item);
          switch (name) {
            case "create":
              console.log("点击按钮 工具栏 - 新增");
              window.parent.globalApp.showFormDialog('新增权限规则', 'auth-rules/edit.html', window, { height: '420px' })
              break;
            case "edit-multi":
              console.log("点击按钮 工具栏 - 批量编辑", this.dataOfCheckedKeys.join(','));
              break;
            case "copy-multi":
              console.log("点击按钮 工具栏 - 批量复制", this.dataOfCheckedKeys.join(','));
              break;
            case "delete-multi":
              console.log("点击按钮 工具栏 - 批量删除", this.dataOfCheckedKeys.join(','));
              if (this.dataOfCheckedKeys.length == 0) {
                this.$message.info('未勾选任何记录');
                return;
              }
              this.$confirm('您确定删除' + this.dataOfCheckedKeys.length + '条记录吗?', '提示', {
                confirmButtonText: '删除',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                this.vuiAjax
                  .get(this.apiRoute.authRulesDelete, { params: { id: this.dataOfCheckedKeys } })
                  .then((msgInfo) => {
                    console.log("[批量删除] ", msgInfo);
                    if (!msgInfo.success) {
                      this.$message.error(msgInfo.message);
                      return;
                    }
                    this.loadData();
                  })
                  .catch((msgInfo) => {
                    this.$message.error(msgInfo.msg);
                  });
              });

              break;
            case "import":
              console.log("点击按钮 工具栏 - 导入");
              // 设置导入表单参数等
              break;
            case "export":
              console.log("点击按钮 工具栏 - 导出");
              break;
            case "refresh":
              console.log("点击按钮 工具栏 - 刷新");
              this.loadingState.refresh = true;
              this.loadData();
              break;
            case "edit":
              console.log("点击按钮 单元格 - 编辑");
              window.parent.globalApp.showFormDialog('编辑权限规则', 'auth-rules/edit.html?id=' + item.id, window, { height: '420px' })
              break;
            case "delete":
              console.log("点击按钮 单元格 - 删除");
              break;
            case "copy":
              console.log("点击按钮 单元格 - 复制");
              break;
            default:
              break;
          }
        },
        // 查询操作
        onSearch() {
          this.loadingState.search = true;
          this.loadData();
        },
        // 分页事件
        onPaging(type, val) {
          this.loadingState.paging = true
          console.log('[分页事件] ', type, val);
          switch (type) {
            case 'page':
              this.dataOfQuery.page = val;
              break;
            case 'size':
              this.dataOfQuery.page = 1;
              this.dataOfQuery.pageSize = val;
              break;
            default:
              break;
          }
          this.loadData();
        },
        // 导入数据
        onImportExcel(success, msgInfo) {
          if (!success) {
            this.$message.error(msgInfo.message);
            return;
          }
          console.log("[导入数据] 上传成功 ", msgInfo);
        },
      },
      created() {
        this.loadData();
      },
    };
    // 全局加载组件
    Vue.use(ElComponents);
    Vue.prototype.apiRoute = new ApiRoute();
    // 获取标准消息格式的 axios 实例
    Vue.prototype.vuiAjax = EsUtils.getStdAjax();
    // 创建应用实例
    var app = new Vue(App)
  </script>
</body>

</html>